<template>
  <div class="app-container">
    <el-button @click="removeBatchIds">批量删除</el-button>
    <el-tree :data="data" @node-click="handleNodeClick" :props="defaultProps" :default-expand-all="false" show-checkbox
      :expand-on-click-node="false" node-key="id" ref="tree">
      >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button v-if="node.level == '1'" type="text" size="mini" @click="() => append(node, data)">
            添加库区
          </el-button>
          <el-button v-if="node.level == '2'" type="text" size="mini" @click="() => append(node, data)">
            添加库位
          </el-button>
          <el-button v-if="node.level == '1'" type="text" size="mini" @click="() => edit(node, data)">
            编辑仓库
          </el-button>
          <el-button v-if="node.level == '2'" type="text" size="mini" @click="() => edit(node, data)">
            编辑库区
          </el-button>
          <el-button v-if="node.level == '3'" type="text" size="mini" @click="() => edit(node, data)">
            编辑库位
          </el-button>

          <el-button v-if="node.childNodes.length == 0 && node.level == '1'" type="text" size="mini"
            @click="() => remove(node, data)">
            删除仓库
          </el-button>
          <el-button v-if="node.childNodes.length == 0 && node.level == '2'" type="text" size="mini"
            @click="() => remove(node, data)">
            删除库区
          </el-button>
          <el-button v-if="node.childNodes.length == 0 && node.level == '3'" type="text" size="mini"
            @click="() => remove(node, data)">
            删除库位
          </el-button>
        </span>
      </span>
    </el-tree>

    <el-dialog
      :title="ruleForm.id == null ? title : (ruleForm.level == '1' ? '修改仓库' : (ruleForm.level == '2' ? '修改库区' : '修改库位'))"
      :visible.sync="dialogVisible" width="30%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item v-if="ruleForm.parendId != 0"
          :label="ruleForm.id == null ? (level == 1 ? '库区' : '库位') : (ruleForm.level == '1' ? '仓库' : (ruleForm.level == '2' ? '库区' : '库位'))"
          prop="wareName">
          <el-input v-model="ruleForm.wareName"></el-input>
        </el-form-item>
        <el-form-item v-else label="仓库" prop="wareName">
          <el-input v-model="ruleForm.wareName"></el-input>
        </el-form-item>

        <el-form-item label="状态">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="'1'">隐藏</el-radio>
            <el-radio :label="'0'" checked>显示</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否根节点" v-if="ruleForm.id == null">
          <el-radio-group v-model="ruleForm.parendId">
            <el-radio :label="0">根节点</el-radio>
            <el-radio checked>默认</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="ruleForm.sort" @change="handleChange" :min="0" :max="10"
            label="请选择排序"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>
import { changeWareStatus, getCascaderWare, listWare, getWare, delWare, addWare, updateWare } from "@/api/wms/ware";
export default {
  name: 'RuoyiUiIndex',

  data () {
    return {
      level: null,
      title: null,
      ruleForm: {
        "showStatus": '1',
        "sort": 1,
      },
      options: [],
      props: {
        children: 'children',
        label: 'wareName',
        value: "id",
        checkStrictly: "true"
      },

      dialogVisible: false,
      defaultProps: {
        children: 'children',
        label: 'wareName',
        id: "id",
      },
      data: [],
      rules: {
        wareName: [
          { required: true, message: '请输入仓库名称', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请选择排序', trigger: 'change' }
        ]

      }
    };
  },
  created () {
    this.TreeList()
  },
  mounted () {

  },

  methods: {
    // 子组件发送自定义事件到父组件
    handleNodeClick (data) {
      // console.log(data);
      this.$emit("handleNodeClick", data)
    },
    append (node, data) {
      console.log("node", node)
      this.ruleForm = {
        "sort": 1,
        "status": '0',
      }

      if (node.level == 1) {
        this.title = "添加库区";
      }
      if (node.level == 2) {
        this.title = "添加库位";
      }
      this.level = node.level;
      this.ruleForm.parendId = node.data.id
      console.log(this.ruleForm.parendId);

      this.ruleForm.level = node.level + 1
      this.dialogVisible = true
    },
    edit (node, data) {
      this.dialogVisible = true
      var id = node.data.id
      getWare(id).then(res => {
        this.ruleForm = res.data
      })
    },
    removeBatchIds () {

      var id = "";
      this.$refs.tree.getCheckedKeys().forEach(element => {
        id = id + element + ","
      });
      delWare(id).then(res => {
        this.$message.success(res.msg)
        this.TreeList()
      })
    },
    remove (node, data) {
      delWare(data.id).then(res => {
        this.$message.success(res.msg)
        this.TreeList()
      })

    },
    TreeList () {
      getCascaderWare().then(res => {
        this.data = this.formatData(res.data)
      })

    },
    // 格式化数据，递归将空的children置为undefined
    formatData (data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.formatData(data[i].children)
        }
      }
      return data;
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.parendId == 0) {
            this.ruleForm.level = 1
          }
          addWare(this.ruleForm).then(res => {
            this.$message.success(res.msg)
            this.resetForm(formName)
          })
        } else {
          this.$message.error("请按规范填写");
        }
      });

    },
    resetForm (formName) {
      this.ruleForm = {
        "sort": 1,
        "status": 0,
      },
        this.$refs[formName].resetFields();
      this.dialogVisible = false
      this.TreeList()
    },
    handleChange (value) {
      this.ruleForm.sort = value
    }

  },
};
</script>

<style lang="scss" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>